@page "/cognitive/jobs"
@using SDK.Authorization
@using SDK.Common
@attribute [Authorize(Roles = $"{Roles.Administrator}, {Roles.Engineer}, {Roles.Reviewer}, {Roles.Auditor}")]

<PageTitle>Jobs/Cognitive | AyBorg</PageTitle>

<div class="page-loading-bar">
    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-0" hidden="@(!_isLoading)" />
</div>

<MudCard Class="rounded-lg">
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h6">Jobs</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent>
        <MudTable Items="@_jobMetas" Elevation="0" Hover>
            <HeaderContent>
                <MudTh>Project</MudTh>
                <MudTh>Dataset</MudTh>
                <MudTh Style="width: 180px">Status</MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd DataLabel="Project">
                    @context.ProjectName
                </MudTd>
                <MudTd DataLabel="Dataset">
                    @context.DatasetName
                </MudTd>
                <MudTd DataLabel="Status">
                    <MudStack>
                        <MudChip Disabled>@context.Status.GetDescription()</MudChip>
                        <MudTooltip Text="@context.QueueDate.ToString()">
                            <MudStack Row>
                                <MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" />
                                <MudText Typo="Typo.body2">@CreateQueueStartString(context)</MudText>
                            </MudStack>
                        </MudTooltip>
                        <MudStack hidden="@(!IsDurationVisible(context))" Row>
                            <MudIcon Icon="@Icons.Material.Filled.HourglassTop" Size="Size.Small" />
                            <MudText Typo="Typo.body2">@CreateDurationString(context)</MudText>
                        </MudStack>
                    </MudStack>
                </MudTd>
            </RowTemplate>
        </MudTable>
    </MudCardContent>
</MudCard>
